<template>
  <div >
    <baidu-map
        class="map"
        @ready="handler"
        center="中国"
        :map-click="false">
      <bml-marker-clusterer
          :averageCenter="true"
      >
        <div
            v-for="(marker, i) of markers"
            :key="i">
          <bm-marker
              :dragging="true"
              animation="BMAP_ANIMATION_BOUNCE"
              :icon="{url: marker.url, size: { width: 30, height: 30 }}"
              :position="{lng: marker.lng, lat: marker.lat}"
              @click="infoWindowOpen(marker)"
          >
            <bm-info-window
                title="弹窗信息"
                :position="{lng: marker.lng, lat: marker.lat}"
                :show="marker.showFlag"
                @close="infoWindowClose(marker)"
                @open="infoWindowOpen(marker)"
            >
              <p>打豆豆</p>
              <p>打豆豆</p>
              <p>打豆豆</p>

            </bm-info-window>
          </bm-marker>
        </div>
      </bml-marker-clusterer>
    </baidu-map>
  </div>
</template>

<script>
// 按需引入点聚合
import {BmlMarkerClusterer} from 'vue-baidu-map'
// 引入marker
import BmMarker from 'vue-baidu-map/components/overlays/Marker'

// 插入 100 个随机点
const markers = []
//随机 地点 100
for (let i = 0; i < 20; i++) {
  const position = {
    lng: Math.random() * 40 + 85,
    lat: Math.random() * 30 + 21,
    url: 'https://tccbucket.oss-cn-beijing.aliyuncs.com/x1.gif',
    showFlag: false
  }
  //添加 标记点
  markers.push(position)

}
// const carList = [
//   {}
// ]
export default {
  name: 'Map1',
  components: {
    BmlMarkerClusterer,
    BmMarker
  },
  data() {
    return {
      BMap: '',
      map: '',
      markers,
      // carList,
      show: false
    }
  },
  methods: {
    handler({BMap, map}) {
      map.enableScrollWheelZoom(true)
      // map.centerAndZoom('青岛市', 13)
      // 赋值，方便调用，本节没用到
      this.BMap = BMap
      this.map = map
    },
    // 关闭信息窗口 @close 自带的方法
    infoWindowClose(marker) {
      marker.showFlag = false
      console.log(marker)
    },
    // 首先点击marker时开启信息窗口，其实没必要在 bm-info-window 上写 @open 因为如果是关闭状态根本就点不到，所以就无法触发 @open
    // 如果在 bm-info-window 上写了 @open 在点击marker时会触发两次infoWindowOpen函数，而且可以很明显的看到有延时
    infoWindowOpen(marker) {
      marker.showFlag = true
      console.log(marker)
    }
  }
}
</script>
<style scoped>
.map {
  height: 800px;
}
</style>
